<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM 操作演示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
            border: 1px solid red;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 10px;
            display: inline-block;
        }

        .new-class {
            font-weight: bold;
            color: green;
        }
    </style>
</head>
<body>
<h1 id="main-title">jQuery DOM 操作演示</h1>

<div id="container">
    <p class="content">这是一个段落</p>
    <ul id="list">
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
    <a href="#" id="link">测试链接</a>
    <div class="box"></div>
    <div class="box"></div>
</div>

<button id="btn-add">添加元素</button>
<button id="btn-remove">移除元素</button>
<button id="btn-modify">修改元素</button>
<button id="btn-style">修改样式</button>
<button id="btn-traverse">遍历元素</button>
<button id="btn-append">追加元素</button>

<script>
    $(function () {
        // ====================== 1. 获取DOM元素 ======================
        // 无论匹配多少元素，始终返回一个 jQuery 包装对象（类数组对象），即使没有匹配到元素也不会返回 null 或 undefined
        // 通过ID选择器获取元素（返回jQuery对象）
        const $title = $('#main-title'); // 获取id为"main-title"的元素
        console.log($title.val())

        // 通过类选择器获取元素集合（返回包含所有匹配元素的jQuery对象）
        const $content = $('.content'); // 获取所有class包含"content"的元素

        // 通过类选择器获取多个元素（返回jQuery对象集合）
        const $boxes = $('.box'); // 获取所有class包含"box"的元素

        // 通过ID选择器获取单个元素（最佳实践：ID在页面中应该是唯一的）
        const $list = $('#list'); // 获取id为"list"的元素

        // console.log('获取的元素:', $title, $content, $boxes, $list);

    // ====================== 2. 修改元素内容 ======================
        $title.text('修改后的标题');
        $content.html('<strong>加粗的</strong>段落内容');

    // ====================== 3. 修改元素属性 ======================
        $('#link')
            .attr('href', 'https://www.example.com')
            .text('前往示例网站');

    // ====================== 4. 添加/移除CSS类 ======================
        $title.addClass('highlight');
        setTimeout(() => {
            $title.removeClass('highlight');
        }, 2000);

    // ====================== 5. 事件处理 ======================
        $('#btn-add').on('click', function () {
            $list.append(
                $('<li>').text('jQuery添加的列表项 ' + ($list.children().length + 1))
            );
        });

        $('#btn-remove').on('click', function () {
            $list.children().last().remove();
        });

        $('#btn-modify').on('click', function () {
            $list.find('li').each(function (index) {
                $(this).text(`jQuery修改的项 ${index + 1}`);
            });
        });

        $('#btn-style').on('click', function () {
            $boxes.css({
                'background-color': '#e74c3c',
                'border-radius': '50%'
            });
        });

        $('#btn-traverse').on('click', function () {
            console.log('--- jQuery遍历DOM树 ---');

            // 父节点
            console.log('list的父节点:', $list.parent());

            // 子节点
            console.log('list的子节点:', $list.children());

            // 兄弟节点
            const $container = $('#container');
            console.log('container的第一个子节点:', $container.children().first());
            console.log('container的最后一个子节点:', $container.children().last());
        });

        $('#btn-append').on('click', function () {
            const input = $('#item_name');
            const value = input.val(); // 获取当前值
            const newItem = $('<li>').text('新追加的列表项： ' + value + '：' + ($list.children().length + 1))
            $list.append(newItem);
        })



    // ====================== 6. 创建并插入新元素 ======================
        $('<div>')
            .text('jQuery动态创建的元素')
            .addClass('new-class')
            .appendTo('body');

    // ====================== 7. 操作表单元素 ======================
        $('<input>')
            .attr({
                id: 'item_name',
                type: 'text',
                placeholder: 'jQuery输入内容...',
            })
            .appendTo('body');

    // ====================== 8. 事件委托 ======================
        $list.on('click', 'li', function () {
            $(this).toggleClass('highlight');
        });

        // 9. jQuery特有方法
        $boxes.hover(
            function () {
                $(this).fadeTo(200, 0.5);
            },
            function () {
                $(this).fadeTo(200, 1);
            }
        );
    });
</script>
</body>
</html>
